<template>
	<view class="container">
		<!-- 选择类目 -->
		<view v-if="categoryList.length > 0" class="class-wrap">
			<view class="title">选择类目</view>
			<scroll-view scroll-x style="width: calc(100vw - 180rpx)">
				<view class="class-list">
					<view
						class="class-item"
						:class="index == classIndex ? 'class-active' : ''"
						@click="chooseCategory(item, index)"
						v-for="(item, index) in categoryList"
						:key="item.id"
					>
						{{ item.name }}
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 标题输入框 -->
		<wd-input v-model="formData.title" :maxlength="20" placeholder="请输入标题(选填)" show-word-limit />
		<!-- 内容输入框 -->
		<textarea class="textarea" v-model="formData.content" placeholder="说点什么" maxlength="-1" />
		<view style="margin: 20rpx 0">
			<wd-upload ref="uploader" v-model:file-list="imageList" :before-upload="beforeUpload" :auto-upload="false" multiple :limit="9"></wd-upload>
		</view>
		<wd-button block @click="onPublish">发布</wd-button>
	</view>
</template>

<script setup>
import { onLoad, onShow } from '@dcloudio/uni-app';
import { ref, reactive } from 'vue';
import { uploadImage } from '@/utils/upload.js';
import { baseAPI } from '@/api/index.js';

//页面公共变量
const categoryList = ref([]);
const imageList = ref([]);
const uploader = ref();
const classIndex = ref(null);

const formData = reactive({
	title: '',
	content: '',
	media: [],
	category_id: '',
	discuss_id: ''
});

// 页面生命周期
onLoad((option) => {
	if (option.discuss_id) {
		formData.discuss_id = option.discuss_id;
	}

	getCategory();
});

onShow(() => {});

// 页面函数

function chooseCategory(item, index) {
	classIndex.value = index;
	formData.category_id = item.id;
}

function beforeUpload({ files, fileList, resolve }) {
	imageList.value = fileList;
	resolve(true);
}

async function onPublish() {
	uni.showLoading({
		title: '发布中'
	});

	for (let file of imageList.value) {
		const imgUrl = await uploadImage(file);
		formData.media.push(imgUrl);
	}

	baseAPI.post('post/publish', formData).then((res) => {
		if (res.code === 200) {
			uni.showToast({
				title: '发布成功',
				icon: 'success'
			});

			wechatCheckImage(res.result.id);

			setTimeout(() => {
				uni.switchTab({
					url: '/pages/index/index'
				});
			}, 1500);
		}

		uni.hideLoading();
	});
}

function wechatCheckImage(post_id) {
	baseAPI.post('post/wechatCheckImg', {
		post_id
	});
}

function getCategory() {
	baseAPI.get('category/getList').then((res) => {
		if (res.code === 200) {
			categoryList.value = res.result;
		}
	});
}
</script>

<style lang="scss" scoped>
.textarea {
	width: calc(100% - 20rpx);
	padding: 10rpx;
}

.class-wrap {
	display: flex;
	margin: 30rpx 0;

	.title {
		font-size: 28rpx;
		color: #999;
		margin-right: 20rpx;
		white-space: nowrap;
	}

	.class-list {
		display: flex;
		align-self: center;

		.class-item {
			margin-right: 20rpx;
			background-color: #eee;
			font-size: 24rpx;
			line-height: 1;
			padding: 10rpx 20rpx;
			border-radius: 100rpx;
			white-space: nowrap;
		}

		.class-active {
			background-color: $-color-theme;
			color: $-button-primary-color;
		}
	}
}
</style>
